<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="ch_ZN">
<head>
<%@ include  file="/common/taglibs.jsp"%>
<%@ include  file="/common/meta.jsp"%>
<title>我的瀑布流</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<link rel="stylesheet" href="${ctx}/resource/css/styleFlow.css" />
<link rel="stylesheet" type="text/css"	href="${ctx }/resource/css/jquery/jquery.ui.all.css" />
<script type="text/javascript" src="${ctx }/resource/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="${ctx }/resource/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${ctx }/resource/js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="${ctx }/resource/js/jquery.ui.button.js"></script>
<script type="text/javascript" src="${ctx }/resource/js/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="${ctx }/resource/js/jquery.ui.position.js"></script>
<script type="text/javascript" src="${ctx }/resource/js/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="${ctx }/resource/js/jquery.ui.button.js"></script>
<script type="text/javascript" src="${ctx }/resource/js/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="${ctx }/resource/js/jquery.ui.effect.js"></script>


<!-- scripts at bottom of page -->

</head>
<body class="demos ">
<!-- #site-nav -->

<section id="content">


<h1>Infinite Scroll</h1>


<div id="copy">
<p>Masonry integrates well with auto-paging scripts like <a
	href="http://infinite-scroll.com/">Infinite Scroll</a> by <a
	href="http://paulirish.com">Paul Irish</a>. Using the <a
	href="../docs/methods.html#appended"><code>appended</code> method</a>,
Masonry will position only the newly appended elements, and skip overko9
all the previous elements that are already in their proper position,
thus saving precious milliseconds of page load time. This demo also
makes use of the <code>isAnimatedFromBottom</code> flag.</p>
</div>

</section>

<div id="container" class="clearfix">
<div  class="item">
			<div class="item_t">
				<div class="img">
					<a href="#"><img alt="" src="${ctx}/resource/images/01.jpg" ></a>
					<span class="price">￥195.00</span>
					<div style="display: none;" class="btns">
						<a href="#" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span></span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#" id='newComment'>评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div  class="item">
			<div class="item_t">
				<div class="img">
					<a href="#"><img alt="" src="${ctx}/resource/images/02.jpg" ></a>
					<span class="price">￥195.00</span>
					<div style="display: none;" class="btns">
						<a href="#" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span></span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div  class="item">
			<div class="item_t">
				<div class="img">
					<a href="#"><img alt="" src="${ctx}/resource/images/03.jpg" ></a>
					<span class="price">￥195.00</span>
					<div style="display: none;" class="btns">
						<a href="#" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span></span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#" onclick='addNewComments()'>评论</a><em class="bold">(0)</em></div>
				<div class="items_comment" style="clear:both">很不错</div>
				<div id="addComments" title="Create new user" style="display:none">
					<form >
					<fieldset>
						<label for="name">评论</label>
						<textarea rows="5" cols="20" id="newCommentText"></textarea>	
						<input type='button' value='提交'>
					</fieldset>
					</form>
				</div>
			</div>
		</div><!--item end-->
		
		<div  class="item">
			<div class="item_t">
				<div class="img">
					<a href="#"><img alt="" src="${ctx}/resource/images/04.jpg"></a>
					<span class="price">￥195.00</span>
					<div style="display: none;" class="btns">
						<a href="#" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span></span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item">
			<div class="item_t">
				<div class="img">
					<a href="#"><img alt="" src="${ctx}/resource/images/05.jpg"></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span></span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->





</div>

<div id="next_page"><a
	href='http://localhost:8080/Pet/ShowPicAction'>next page</a></div>

<div id="page_loading"><span>loading......</span></div>



<nav id="page-nav">
<a href="http://localhost:8080/BabyShow/action/showPic"></a>
</nav>




<!-- #container -->



<script>
  $(function(){
    
	  var $container = $('#container');
	    
	    $container.imagesLoaded(function(){
	      $container.masonry({
	        itemSelector: '.item',
	        columnWidth: 226,
	    	gutterWidth:15			
	      });
	    });

	    $container.infinitescroll({
	        navSelector  : '#page-nav',    // selector for the paged navigation 
	        nextSelector : '#page-nav a:first',  // selector for the NEXT link (to page 2)
	        itemSelector : '.item',     // selector for all items you'll retrieve
	        debug: true,
	        dataType: 'json',
	        loading: {
	            finishedMsg: 'No more pages to load.'
	          },
	    	path :function (urlLink,pageNum){	  	    	
	      if(typeof urlLink!='function'){
	    	  var destUrl=$(urlLink).attr('href')+"?page="+pageNum;
	        return destUrl;
	      }
	    },
	    template:function(data){
		    return Baby.flow.processData(data);
	  	    }},	       
	        // trigger Masonry as a callback
	        function( newElements ) {
	          // hide new items while they are loading
	          var $newElems = $( newElements ).css({ opacity: 0 });	         
	 
	          // ensure that images load before adding to masonry layout
	          $newElems.imagesLoaded(function(){
	            // show elems now they're ready
	            $newElems.animate({ opacity: 1 });
	            $container.masonry( 'appended', $newElems, true ); 
	        	$('.item').mouseover(function(){
	    			$(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');
	    			$('.btns',this).show();
	    		}).mouseout(function(){
	    			$(this).css('box-shadow', '0 1px 3px rgba(34,25,25,0.2)');
	    			$('.btns',this).hide();		 	
	    		});
	          });
	        }
	      ); 

	    $( "#comments" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
				"添加新评论": function() {
					$.ajax({
						url:"${ctx}/action/addComments",
						data:"imageId="+iamgeId+"&comments="+$("#newCommentText").val(),
						dataType:"json",
						method:"post",
						success:function(data){
							  if(data.flag){
								 
								  }
							  else{
								  alert(data.message);
								  }
							}
						});

				
				
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				
			}
		});
			
		
  });

  function addNewComments(imageId){
		$( "#addComments" ).show();	 
		}

</script>

<footer id="site-footer">
jQuery Masonry by
<a href="http://desandro.com">David DeSandro</a>
</footer>

</section>
<!-- #content -->

</body>
</html>